import React,{ Component } from 'react'
 
import { TabBarContainer,TabBarLi,TabBarUl } from './TabBarStyle'

import {NavLink} from 'react-router-dom'

const Item = (props) => {
    return( 
        <TabBarLi> 
            <NavLink activeclass="active" to={ props.path } >
                <i className={'fa fa-'+ props.icon}>  </i>
                <span> { props.text }</span>
            </NavLink>
        </TabBarLi>
    )
}

class TabBar extends Component{

    constructor () {
        super()
        this.state = {
            list:[
                {
                    id:1,
                    text:'首页',
                    icon:'home',
                    path:'/home'
                },
                {
                    id:2,
                    text:'拼团',
                    icon:'users',
                    path:'/tuan'
                },
                {
                    id:3,
                    text:'购物车',
                    icon:'shopping-bag',
                    path:'/shop'
                },
                {
                    id:4,
                    text:'我的',
                    icon:'user-o',
                    path:'/mine'
                },
            ]
        }
    }
    renderItem = () => {
        return this.state.list.map( (item) =>  <Item {...item} key={ item.id }></Item>)
    }

    render () {
        return (
           <TabBarContainer>
               <TabBarUl>
                {
                    this.renderItem()
                }
               </TabBarUl>
           </TabBarContainer>
        )
    }
}

export default TabBar